function renderCustomers() {
	pjs.load("root",function(root) {
		pjs.get(root,'examples',function(examples) {
			if (!examples.customers) {
				examples.customers = [];
				pjs.save(examples);
			}
			customers = examples.customers; // get the customers object, the list of the customers
			document.getElementById('customerFields').style.display='none';//make sure the customers field is hidden
			customersElement = document.getElementById("customersDiv");
			customersElement.innerHTML = ""; // clear it out
			Array.forEach(customers,function(customer) {// iterate through the customers customers 
				var customerElement = customersElement.appendChild(document.createElement('div'))
																			.appendChild(document.createElement('a'));
				customerElement.href="#";
				customerElement.innerHTML = customer.firstName + " " + customer.lastName;// render each customer in a new div
				(function(customer){customerElement.onclick =function() {
					renderCustomer(customer);
				}})(customer);//bind the customer to this function
			});
		})
	});
}
function renderCustomer(customer) {
	customersElement.innerHTML = "<h2>" + customer.firstName + " " + customer.lastName+ "</h2>" + 
		"<h4>created " + customer.created + "</h4>";	
	var customerFieldsDiv = document.getElementById('customerFields');
	customerFieldsDiv.style.display='block';
	customerFieldInputs = customerFieldsDiv.getElementsByTagName("input"); 
	for (var i = 0; i < customerFieldInputs.length; i++) // automatically populate values by matching the input names with object properties
		customerFieldInputs[i].value = customer[customerFieldInputs[i].name];
	
	document.getElementById('customerOk').onclick = function() {
		pjs.changing(customer); // this an optional call to make before modification 
									// so that only modifications are sent back to the server instead of the whole object
									 
		for (var i = 0; i < customerFieldInputs.length; i++) // just reverse the process!
			customer[customerFieldInputs[i].name] = customerFieldInputs[i].value;
		pjs.save(customer); // must explicitly save the object	
		renderCustomers();
	}
	
	document.getElementById('customerDelete').onclick = function() {
		Array.remove(customers,customer);
		renderCustomers();
	}
}
function addCustomer() {
	var newCustomer = {
		firstName : "first name",
		lastName : "last name",
		created : new Date(),
		address : "",
		phoneNumber : "",
		comment : ""
	};
	customers.push(newCustomer); // add a new customer to the top of the array using standard array functions
 	renderCustomer(newCustomer);
}
renderCustomers();